<!--
 * @description: 移动镜头
 * @fileName: MoveLens
 * @author: 17076
 * @date: 2025/2/25-下午2:58
 * @version: V1.0.0
-->

<template>
  <cs-dialog
    :dialog="dialogOption"
    @onSubmit="save"
  >
    <div slot="content">
      <el-alert
        title="默认移动组镜到所选组镜之后"
        type="warning"
        show-icon
      />
      <vxe-grid v-bind="gridOptions" class="select-table" style="margin-top: 10px" />
      <el-input v-model="filterName" clearable placeholder="搜索组镜编号或剧情内容" style="margin-top: 10px" @input="searchEvent" />
      <vxe-grid v-bind="gridOptions2" class="list-grid" style="margin-top: 10px" @cell-click="handleCellClick">
        <template #operation="{ row }">
          <i v-if="selectRow &&  selectRow['lensNo'] === row['lensNo']" class="el-icon-check" style="color: white" />
        </template>
      </vxe-grid>
    </div>
  </cs-dialog>
</template>

<script>
import mixin from '@/views/mixin'
import _ from 'lodash'
import { queryLensList, moveLens } from '@/api/lens'
export default {
  name: 'MoveLens',
  mixins: [mixin],
  props: {
    // 剧本id
    playId: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      dialogOption: {
        top: '5%',
        title: {
          title: '移动到'
        },
        show: false
      },
      // 筛选字段
      filterName: '',
      // 选中的分镜id
      lensId: '',
      // 当前选中的单元格
      selectRow: null,
      gridOptions: {
        ...mixin.data().gridOptions,
        border: true,
        showHeader: false,
        minHeight: 40,
        height: 40,
        columns: [
          { field: 'index', title: '编号', width: 100, align: 'center' },
          { field: 'scenery', title: '内容', align: 'left' }
        ],
        data: []
      },
      gridOptions2: {
        ...mixin.data().gridOptions,
        border: true,
        showHeader: false,
        loading: false,
        columns: [
          { field: 'index', title: '编号', width: 100, align: 'center', type: 'html' },
          { field: 'scenery', title: '内容', align: 'left', type: 'html' },
          { title: '操作', width: 100, align: 'center', slots: { default: 'operation' }}
        ],
        data: []
      },
      // 用于存储原始数据
      originalData: []
    }
  },
  methods: {
    // 显示弹窗
    show(data) {
      this.lensId = data.lensId
      this.gridOptions.data = [data]
      this.dialogOption.show = true
      this.queryAllLensList()
    },
    // 获取所有分镜列表
    queryAllLensList() {
      this.gridOptions2.loading = true
      queryLensList({ playId: this.playId }).then(res => {
        this.gridOptions2.loading = false
        this.gridOptions2.data = res.data
        this.originalData = _.cloneDeep(res.data) // 新增：保存原始数据
      }).catch(() => {
        this.gridOptions2.loading = false
      })
    },
    // 单元格点击
    handleCellClick({ row }) {
      this.selectRow = row
    },
    // 搜索
    handleSearch() {
      const filterVal = String(this.filterName).trim().toLowerCase()
      if (filterVal) {
        const filterRE = new RegExp(filterVal, 'gi')
        const searchProps = ['lensNo', 'scenery']
        const rest = this.originalData.filter(item => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1))
        this.gridOptions2.data = rest.map(row => {
          const item = _.cloneDeep(row)
          searchProps.forEach(key => {
            item[key] = String(item[key]).replace(filterRE, match => `<span class="keyword-highlight">${match}</span>`)
          })
          return item
        })
      } else {
        this.gridOptions2.data = _.cloneDeep(this.originalData) // 恢复原始数据
      }
    },
    // 节流函数,间隔500毫秒触发搜索
    searchEvent: _.throttle(function() {
      this.handleSearch()
    }, 500),
    // 保存
    save(callback) {
      if (!this.selectRow) {
        this.$baseMessage.error('请选择要移动的组镜位置!')
        return
      }
      moveLens({ lensId: this.lensId, lensIdTo: this.selectRow['lensId'] }).then(res => {
        const { code, msg } = res
        code === 200 ? this.$baseMessage.success(msg || '移动成功!') : this.$baseMessage.error(msg || '移动失败!')
        this.$emit('reloadData')
        callback(true)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.list-grid {
  ::v-deep(.keyword-highlight)  {
    background-color: $base-color-default;
  }
}
</style>
